﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <link rel="stylesheet" href="~/lib/Newspublis/css/index.css" />
    <link rel="stylesheet" href="~/lib/Newspublis/css/swiper-bundle.min.css" />
    @*<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">*@
    <script src="./lib/jq.js">
        </script>
    <style>
     
    </style>
</head>
<body>
    <div id="app" class="container">
        <!-- 轮播 -->
        <div class="swiper mySwiper">
            <div class="swiper-wrapper">
                <div class="swiper-slide" v-for="item in BannerList" :key="item.id">
                    <a :href="item.url" target="_blank">
                        <img :src="item.image" :alt="item.remark">
                        <h1 class="swiperH1">{{item.remark}}</h1>
                    </a>
                </div>
            </div>
            <div class="swiper-button-next"></div>
            <div class="swiper-button-prev"></div>
        </div>
        <!-- 轮播end -->

        <div class="Togglebar">
            <div class="Togglebarlist">
                <p :class="{active:index==iof}" v-on:click="switchs(index)" v-for="(item,index) in Togglebarlist">{{item}}</p>
            </div>
            <div class="Togglebaritem">
                <img src="~/images/weather天气.png" style="width:100px; height:100px;" />
                <p>{{weather.date}}</p>
                <p>风向：{{weather.winddirection}}</p>
                <p>实时气温：{{weather.temperature}}℃</p>
                <p>城市：{{weather.city}} 天气情况：{{weather.weather}}</p>
            </div>
        </div>
       
               
        <div class="Mainarea">
            <h1 class="title" style="float: left; color: #5184eb; font-size: 20px; line-height: 39px; border-bottom: 4px solid #5184eb;">热门文章</h1>
            <div class="Mainarealist">
                <div class="Mainareaitem" v-for="item in News" v-on:click="openNews(item.id)" :key="item.id">
                    @*v-show="imageLoaded" 处理图片不显示
                    v-on:error="imageLoaded = false"
                    v-on:load="imageLoaded = true"*@
                    <img :src="item.image" v-show="imageLoaded"
                         v-on:error="imageLoaded = false"
                         v-on:load="imageLoaded = true" alt="">
                    <div>
                        <h2 class="category-title">{{item.newsTitle}}</h2>
                        <p>{{item.publishDate}}</p>
                        <p v-html="item.newsContent" style="overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; width: 100%; height: auto;">

                        </p>
                    </div>
                </div>
            </div>
        </div>

        <div class="seachbox">
            <div class="searchtitle">
                <p>最新评论文章</p>
            </div>
            <div class="searchcont" v-for="item in PLNews" v-on:click="openNews(item.id)" :key="item.id">
                <img :src="item.image" v-show="plImageLoaded"
                     v-on:error="plImageLoaded = false"
                     v-on:load="plImageLoaded = true" alt="">
                <div class="seacchtext">
                    <h3>{{item.newsTitle}}</h3>
                    <p>{{item.publishDate}}</p>
                </div>
            </div>
            <button v-on:click="reload" class="dohua" style="position: fixed; right: 100px; top: 57%; display: block; width: 50px; height: 50px; border: 1px solid #e2e2e2; margin-bottom: 10px; cursor: pointer; text-align: center; line-height: 15px; color: #666; background: #fff; transition: all .3s ease-out;">刷新</button>
            <button class="dohua" style="position: fixed; right: 100px; top: 65%; display: block; width: 50px; height: 50px; border: 1px solid #e2e2e2; margin-bottom: 10px; cursor: pointer; text-align: center; line-height: 15px; color: #666; background: #fff; transition: all .3s ease-out;">设置</button>
            <button class="dohua" style="position: fixed; right: 100px; top: 73%; display: block; width: 50px; height: 50px; border: 1px solid #e2e2e2; margin-bottom: 10px; cursor: pointer; text-align: center; line-height: 15px; color: #666; background: #fff; transition: all .3s ease-out;">用户反馈</button>
        </div>
     
    </div>

    <script src="~/lib/Newspublis/js/swiper-bundle.min.js"></script>
    @*<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>*@
    <script src="~/lib/newspublis/js/swiper-bundle.min.js"></script>
    <script src="~/lib/vue.js"></script>
    <script src="~/lib/axios.js"></script>
    <script>
        var app = new Vue({
            el: ".container",
            data: {
                iof: 0,
                Togglebarlist: ["今日天气"],
                News: [],
                BannerList: [],
                PLNews: [],
                weather: [],
                imageLoaded: true, // 初始设为 true，假设图片可以加载
                plImageLoaded:true,
                feedbackContent: '',
                showModal: false // 控制弹窗显示与隐藏
            },
            methods: {
                        isshowModal(){
                        this.showModal =!this.showModal;
                        },
                switchs(index) {
                    this.iof = index;
                },
                openNews(e) {
                    var id = parseInt(e);
                    localStorage.setItem("NewsId", id);
                    window.open("/News/NewsShow");
                },
                reload() {
                    location.reload();
                },
                feedback() {
                    document.querySelector('.shade').classList.remove('hide');
                    document.querySelector('.modal').classList.remove('hide');
                },
                feedbackSend() {
                    if (this.feedbackContent === "") {
                        alert("建议不能为空");
                        return;
                    }
                    alert("反馈成功感谢您的支持！");
                    document.querySelector('.modal').classList.add('hide');
                    document.querySelector('.shade').classList.add('hide');
                    this.feedbackContent = "";
                },
                Close() {
                    document.querySelector('.modal').classList.add('hide');
                    document.querySelector('.shade').classList.add('hide');
                }
            },
            mounted() {
                axios.get('https://restapi.amap.com/v3/weather/weatherInfo?city=451000&key=d9c7f38480fbfc4398ada8d3a0c58cd3').then(res => {
                    this.weather = res.data.lives[0];
    console.log(res);
  });

  axios.get('/News/GetNews').then(res => {
    this.News = res.data.data;
  }).catch(err => {
    console.log(err);
  });

  axios.get('/News/GetPLNews').then(res => {
    this.PLNews = res.data.data;
    var arrid = [];
    var Newarr = [];
    console.log( this.PLNews)
    for (var item = 0; item < this.PLNews.length; item++) {
                        if (arrid.indexOf(this.PLNews[item].id) == -1 && this.PLNews[item].newsStatus==1) {
        arrid.push(this.PLNews[item].id);
        Newarr.push(this.PLNews[item]);
      }
    }
    this.PLNews = Newarr;
  }).catch(err => {
    console.log(err);
  });

  axios.get('/admin/GetBannerInfo').then(res => {
    this.BannerList = res.data.data.data;
    console.log(this.BannerList);

    // 在 BannerList 数据加载完成后再初始化 Swiper
    this.$nextTick(() => {
      new Swiper('.mySwiper', {
        slidesPerView: 1,
        spaceBetween: 10,
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev',
        },
        pagination: {
          el: '.swiper-pagination',
          clickable: true,
        },
        loop: true,
        autoplay: {
          delay: 2500, // 自动播放的时间间隔，单位为毫秒
          disableOnInteraction: false, // 用户交互后是否继续自动播放
        },
      });
    });
  }).catch(err => {
    console.log(err);
  });
},

        });
    </script>

  
</body>
</html>
